<template>
  <div>
    <div class="page-title">{{ getLang('pageTitle') }}</div>
    <div class="app-container">

      <div class="filter-container">
        <comm-form
          ref="searchForm"
          :form-visible="true"
          :form-definition="roleSearchFormLayout"
          :form-data="formObj.searchForm.role"
        />
      </div>

      <FlexTable
        ref="roleList"
        :table-key="listObj.role.isUpdate"
        :ref-main-page="refSelfObj"
        :title="getLang('roleList')"
        :show-selection="false"
        :has-action-columns="true"
        :table-visible="true"
        edit-mode="none"
        height="500"
        :is-loading="listObj.role.listLineLoading"
        :table-definition="roleListLayout"
        :table-data="listObj.role.listLine"
      />
      <pagination
        v-show="listObj.role.lineNum>0"
        :total="listObj.role.lineNum"
        :page.sync="listObj.role.pagingDefine.page"
        :limit.sync="listObj.role.pagingDefine.limit"
        @pagination="searchRoleList"
      />

      <form-dialog
        v-if="formObj.addForm.showFlg.role"
        ref="roleEditDlg"
        :close-on-click-modal="false"
        :dialog-visible="formObj.addForm.showFlg.role"
        :title="isAddRole?getLang('addRoleTitle'):getLang('updateRoleTitle')"
        column-count="1"
        :form-data="formObj.addForm.role"
        :form-definition="roleAddFormLayout"
        @close="formObj.addForm.showFlg.role = false"
      />

      <el-tooltip placement="top" content="tooltip">
        <back-to-top :custom-style="baseBckToTopStyle" :visibility-height="300" :back-position="1" transition-name="fade" />
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import BackToTop from '@/components/BackToTop'

import FormDialog from '../../common/components/form-dialog/FormDialog'
import FlexTable from '../../common/components/flex-table/FlexTable'
import CommForm from '../../common/components/com-form/CommForm'

import logic from './role.logic'

export default {
  name: 'RolePage',
  components: {
    BackToTop, FormDialog, FlexTable, CommForm, Pagination
  },
  mixins: [logic]
}
</script>

<style scoped>
</style>
